<template>
    <!-- html结构 -->
    <div class="person">

        <h1>person PAGE</h1>
        <p>姓名：{{ name }}</p>
        <p>年龄：{{ age }}</p>
        <p>性别：{{ sex }}</p>
        <p>爱好：{{ hobby }}</p>
        <button @click="showContact">查看联系方式</button>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script lang="ts">
export default {
    // 生命周期
    beforeCreate() {
        console.log('beforeCreate');
    },
    name: 'person',//组件名 
    // data，methods是可以和setup同时存在，
    // 但是data和methods可以用this.的形式使用setup里面的内容
    // 因为setup比较data和methods更早执行
    setup() {
        // 数据
        let name = '张三';//此时变量不是响应式
        let age = 18;
        let sex = '男';
        let hobby = ['吃饭', '睡觉', '打豆豆'];
        // 方法
        function changeName() {
            name = '王五';
        }
        function changeAge() {
            age += 1;
        }
        function showContact() {
            alert('123456789');
        }
        
        return {//返回的是对象
            name,
            age,
            sex,
            hobby,
            changeName,
            changeAge,
            showContact
        }
    }
}
</script>

<style>
/* css样式 */
.person {
    background-color: #f66;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 15px;
}
</style>
